@font-face {
    font-family: 'CoastSans-Bold';
    src: url("../fonts/CoastSans-Bold.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'CoastSans-Regular';
    src: url("../fonts/CoastSans-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
  }            

  :root {
    --font-heading: "CoastSans-Bold", 'Open Sans', Arial, Helvetica, sans-serif;
    --font-body: "CoastSans-Regular", 'Open Sans', Arial, Helvetica, sans-serif;
    --brand-blue: #0056FF;   /* top bar + accents */
    --heading-blue: #0056FF; /* headline color    */
    --link-blue: #0056FF;    /* link color        */
    --text-dark: #000000;    /* body copy         */
    --bg: #FAFAFA;           /* page background   */
  }


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--bg);
      color: var(--text-dark);
      line-height: 1.5;
    }

    /* ===== TOP BAR ===== */
    .topbar {
      background-color: var(--brand-blue);
      height: 70px;
      justify-content: center;
    }

    /*Centered inner wrapper 1320 px boundary*/
    .topbar-inner {
	    max-width: 1320px;
	    margin: 0 auto;
	    padding: 1.25rem 2.5rem;
      height: 70px;
    }

    .logo {
      height: auto;   /* adjust to your logo file */
      width: 175px;
      display: block;
    }

    .logo-link {
      display: inline-block;
      line-height: 0;
    }

    /* ===== MAIN LAYOUT ===== */
    .content {
      max-width: 1320px;
      margin: 0 auto;
      padding: 4rem 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3rem;
    }

    /* ===== TEXT COLUMN ===== */
    .text-column {
      flex: 1 1 50%;
      max-width: 560px;
    }

    .heading {
      color: var(--heading-blue);
      font-size: 40px;
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 1.75rem;
      font-family: var(--font-heading);
    }

    .body-text {
      font-size: 16px;
      margin-bottom: 1.25rem;
      max-width: 42ch;
    }

    .link {
      color: var(--link-blue);
      text-decoration: underline;
    }

    .link:hover {
      text-decoration: none;
    }

    /* ===== ILLUSTRATION ===== */
    .illustration {
      flex: 1 1 20%;
      display: flex;
      justify-content: center;
    }

    .illustration img {
      width: 100%;
      height: auto;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 820px) {
      .content {
        flex-direction: column-reverse;
        text-align: left;
        padding: 2.5rem 1.5rem;
        gap: 2rem;
      }

      .text-column {
        max-width: 100%;
      }

      .illustration img {
        max-width: 340px;
      }
    }

    @media (max-width: 480px) {
      .topbar {
        padding: 1rem 1.5rem;
      }
    }